import { vipStatusMap } from "../dict";
import {
  drawerFormState,
  operateType,
  popularBackgroundColorOptions,
} from "../store";
import styles from "../index.module.less";
export default defineComponent({
  setup(props, { attrs, slots, emit, expose }) {
    return () => {
      return (
        <>
          <a-row class="s-drawer-extra-row">
            <s-title>{$t("base.baseInfo")}</s-title>
          </a-row>
          <a-row class="s-drawer-extra-row" gutter={16}>
            {(operateType?.value ?? operateType) === "update" ? (
              <a-col span={24}>
                <a-form-item
                  label={$t("table6")}
                  name="level"
                  labelCol={{ span: 4 }}
                  wrapperCol={{ span: 8 }}
                >
                  <i>LV{drawerFormState.level}</i>
                </a-form-item>
              </a-col>
            ) : null}
          </a-row>

          <a-row class="s-drawer-extra-row" gutter={16}>
            <a-col span={12}>
              <a-form-item
                name="url"
                label={$t("table25")}
                rules={[
                  {
                    required: true,
                    trigger: ["blur"],
                    message: $t("placeholder184"),
                  },
                ]}
              >
                <upload-avatar v-model={drawerFormState.url} />
              </a-form-item>
            </a-col>

            <a-col span={12}>
              <a-form-item
                name="icon"
                label={$t("table26")}
                rules={[
                  {
                    required: true,
                    trigger: ["blur"],
                    message: $t("placeholder184"),
                  },
                ]}
              >
                <upload-avatar v-model={drawerFormState.icon} />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row class="s-drawer-extra-row" gutter={16}>
            <a-col span="12">
              <a-form-item
                label={$t("table24")}
                name="name"
                rules={[
                  {
                    required: true,
                    trigger: ["change", "blur"],
                    message: $t("placeholder95"),
                  },
                ]}
              >
                <s-input
                  placeholder={$t("placeholder95")}
                  vModel={drawerFormState.name}
                ></s-input>
              </a-form-item>
            </a-col>
            <a-col span="12">
              <a-form-item
                label={$t("table32")}
                name="title"
                rules={[
                  {
                    required: true,
                    trigger: ["change", "blur"],
                    message: $t("placeholder96"),
                  },
                ]}
              >
                <s-input
                  vModel={drawerFormState.title}
                  placeholder={$t("placeholder96")}
                ></s-input>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row class="s-drawer-extra-row" gutter={16}>
            <a-col span="12">
              <a-form-item
                label={$t("grade28")}
                name="color"
                rules={[
                  {
                    required: true,
                    trigger: ["change", "blur"],
                    message: $t("placeholder97"),
                  },
                ]}
              >
                <s-select
                  vModel:newValue={drawerFormState.color}
                  placeholder={$t("placeholder97")}
                  options={popularBackgroundColorOptions}
                  mode="combobox"
                >
                  {{
                    option: ({ value, label, icon }: any) => (
                      <div class={styles.slot_option_style}>
                        <span>{label}</span>
                        <span
                          style={`background: ${value}`}
                          class={styles.Color}
                        ></span>
                      </div>
                    ),
                  }}
                </s-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row class="s-drawer-extra-row">
            <s-title>{$t("base.ruleSet")}</s-title>
          </a-row>
          <a-row class="s-drawer-extra-row" gutter={16}>
            <a-col span={12}>
              <a-form-item
                label={$t("table115")}
                name="rule"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                rules={[
                  {
                    required: true,
                    trigger: ["change", "blur"],
                    message: $t("placeholder98"),
                  },
                ]}
              >
                <i class="mr8  vertical-align-middle">{$t("placeholder99")}</i>
                <a-input-number
                  style="width: 50px"
                  size="small"
                  min={0}
                  vModel:value={drawerFormState.rule}
                />
                <i class="ml8 vertical-align-middle">
                  {$t("base.unit") + "（%）"}
                </i>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row class="s-drawer-extra-row">
            <s-title>{$t("base.seniorSet")}</s-title>
          </a-row>
          <a-row class="s-drawer-extra-row" gutter={16}>
            <a-col span="12">
              <a-form-item
                label={$t("table31")}
                name="status"
                rules={[
                  {
                    required: true,
                    trigger: ["change", "blur"],
                    message: $t("placeholder61"),
                  },
                ]}
              >
                <s-radio-group
                  vModel={drawerFormState.status}
                  options={vipStatusMap}
                ></s-radio-group>
              </a-form-item>
            </a-col>
          </a-row>
        </>
      );
    };
  },
});
